<template>
    <div class="bigbox">
        <div class="au" v-show="isShow">
            <form :model="data.formUser">
                <table>
                    <tr>
                        姓名: <input v-model="data.formUser.uname" type="text" placeholder="请输入名字">
                    </tr>
                    <tr>
                        年龄: <input v-model="data.formUser.uage" type="text" placeholder="请输入年龄">
                    </tr>
                    <tr>
                        <input type="button" value="确认" @click="saveU">
                        <input type="button" value="取消" @click="cancleU">
                    </tr>
                </table>
            </form>
        </div>
        <div class="head">
            <h1>列表页</h1>
        </div>
        <div class="gdp">
            <input type="text" placeholder="请输入搜索内容" v-model="data.keyword">
            <input type="button" value="搜 索" @click="searchU()">
            <input type="button" value="添 加" @click="addW()">
        </div>
        <div class="content">
            <form>
                <table>
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody :data="data.users">
                        <tr v-for="user in data.users" :key="user.id">
                            <td>{{ user.id }}</td>
                            <td>{{ user.uname }}</td>
                            <td>{{ user.uage }}</td>
                            <td>
                                <input type="button" value="编辑" @click="editW(user.id)">
                                <input type="button" value="删除" @click="delU(user.id)">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'

const api = "http://localhost:3000"

let data = reactive({
    users: [],
    keyword: '',
    formUser: {},

})

let isShow = ref(false)

function delU(id) {
    axios.delete(`${api}/user/${id}`).then(() => {
        location.href = './clazz'
    })
}

//显示弹窗
function addW() {
    isShow.value = true
}

//显示弹窗
function editW(id) {
    isShow.value = true
    axios.get(`${api}/user/${id}`).then(res => {
        data.formUser = res.data.data
    })
}

function saveU() {
    data.formUser.id ? updateU(data.formUser.id) : addU()
    isShow.value = false
}

function updateU(id) {
    console.log(data.formUser);

    axios.put(`${api}/user/${id}`, data.formUser).then(() => {
        location.href = './clazz'
    })
}

function addU() {
    console.log(data.formUser);

    axios.post(`${api}/user`, data.formUser).then(() => {
        location.href = './clazz'
    })
}

function cancleU() {
    isShow.value = false
}

function queryAllUsers() {
    console.log(data.keyword);
    axios.get(`${api}/users?keyword=${data.keyword}`).then(res => {
        data.users = res.data.data
        console.log(data.users);
    })
}

function searchU() {
    queryAllUsers()
}

queryAllUsers()

</script>

<style scoped>
table,
tr,
td,
th {
    border: 1px solid;
    border-collapse: collapse;
}

.bigbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: beige;
    flex: 1;
    justify-content: center;
}

.content {
    display: flex;
    justify-items: center;
    align-content: center;
    align-items: center;
    margin-top: 30px;
}

.head {
    display: flex;
    justify-items: center;
    align-content: center;
    justify-content: center;
}

.au {}
</style>